<template>
  <el-form size="small" ref="form" :model="form" :rules="rules" label-width="100px" label-position="right">
    <div>
      <el-form-item class="inline-block" style="width:40%" label="组织名称" prop="deptName">
        <el-input
          type="text"
          v-model="form.deptName"
          placeholder="组织名称"
          style="width:200px"
        />
      </el-form-item>
      <el-form-item class="inline-block" label="组织类型" prop="deptEntType">
        <el-select style="width:200px" v-model="form.deptEntType" placeholder="组织类型">
          <el-option
            v-for="(item, index) in dictObject.dept_ent_type"
            :key="index"
            :label="item.dictLabel"
            :value="item.dictValue"
          ></el-option>
        </el-select>
      </el-form-item>
    </div>
    <div>
      <el-form-item class="inline-block"  style="width:40%" label="公司性质" prop="deptNature">
        <el-select style="width:200px" v-model="form.deptNature" placeholder="公司性质">
            <el-option
              v-for="(item, index) in dictObject.customer_nature"
              :key="index"
              :label="item.dictLabel"
              :value="item.dictValue"
            ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="inline-block" label="业务范围" prop="deptBizScope">
        <el-input
          type="text"
          v-model="form.deptBizScope"
          placeholder="业务范围"
          style="width:200px"
        />
      </el-form-item>
    </div>
    <div>
      <el-form-item  class="inline-block"  style="width:40%" label="成立时间">
        <el-date-picker
          value-format="yyyy-MM-dd"
          style="width:200px"
          size="small"
          v-model="form.deptDate"
          type="date"
          placeholder="成立时间">
        </el-date-picker>
      </el-form-item>
<!--      <el-form-item class="inline-block" label="注册资本">-->
<!--        <el-input style="width:200px" v-model="form.registeredCapital" @input="limitInput($event, 'registeredCapital')" placeholder="注册资本"></el-input>万-->
<!--      </el-form-item>-->
    </div>
    <div>
      <el-form-item class="inline-block"  style="width:40%" label="公司规模" prop="staffNum">
        <el-input style="width:200px" v-model="form.staffNum"  @input="limitInput($event, 'staffNum')" placeholder="公司规模"></el-input>人
      </el-form-item>
      <el-form-item class="inline-block" label="拥有车辆" prop="vehicleNum">
        <el-input style="width:200px" v-model="form.vehicleNum"  @input="limitInput($event, 'vehicleNum')" placeholder="拥有车辆"></el-input>台
      </el-form-item>
    </div>
    <div>
      <el-form-item class="inline-block"  style="width:40%" label="办公电话">
        <el-input style="width:200px" v-model="form.deptTel" placeholder="办公电话"></el-input>
      </el-form-item>
      <el-form-item class="inline-block" label="邮政编码">
        <el-input style="width:200px" v-model="form.deptCode" placeholder="邮政编码"></el-input>
      </el-form-item>
    </div>
    <div>
      <el-form-item class="inline-block" label="经营地址" prop="deptDistrict">
<!--          <virtual-select-->
<!--            style="width:200px"-->
<!--            v-model="form.deptDistrict"-->
<!--            :list="allInfoOptions"-->
<!--            label="addressName"-->
<!--            value="districtId"-->
<!--            :placeholder="'经营地址'"-->
<!--            :keeps-params="10"-->
<!--            :is-concat="true"-->
<!--            :concat-symbol="'-'"-->
<!--            :merge-display="mergeDisplay"-->
<!--            :is-multiple="false"-->
<!--            :allow-create="false"-->
<!--          />-->
        <el-cascader
          clearable
          @change="changeAddress"
          v-model="District"
          placeholder="请选择"
          :options="allInfoOptions"
          filterable
        ></el-cascader>
      </el-form-item>
      <el-form-item class="inline-block ml10" label="" label-width="0" prop="deptAddress">
        <el-input @click.native="dialogVisible_map = true" clearable style="width:200px;" v-model="form.deptAddress" placeholder="详细地址"></el-input>
      </el-form-item>
    </div>
    <div>
      <el-form-item class="inline-block"  style="width:40%" label="联系人" prop="leader">
        <el-input style="width:200px" v-model="form.leader" placeholder="联系人"></el-input>
      </el-form-item>
      <el-form-item class="inline-block" label="职务">
        <el-input style="width:200px" v-model="form.deptPost" placeholder="职务"></el-input>
      </el-form-item>
    </div>
    <div>
      <el-form-item class="inline-block"  style="width:40%" label="联系电话" prop="phone">
        <el-input style="width:200px" v-model="form.phone" placeholder="联系电话"></el-input>
      </el-form-item>
      <el-form-item class="inline-block" label="电子邮箱" prop="email">
        <el-input style="width:200px" v-model="form.email" placeholder="电子邮箱"></el-input>
      </el-form-item>
    </div>
      <el-form-item label="营业执照">
        <imageUpload :limit="1" :fileSize="10" v-model="form.deptLicenseUrl" :toImageUrl="form.deptLicenseUrl"/>
      </el-form-item>
      <el-form-item label="开户许可证">
        <imageUpload :limit="1" :fileSize="10" v-model="form.deptOpenPremit" :toImageUrl="form.deptOpenPremit"/>
      </el-form-item>
      <el-form-item label="道路经营许可证">
        <imageUpload :limit="1" :fileSize="10" v-model="form.deptRoadLicense" :toImageUrl="form.deptRoadLicense"/>
      </el-form-item>
      <el-form-item label="场所照片">
        <imageUpload :limit="3" :fileSize="10" v-model="form.deptPlateUrl" :toImageUrl="form.deptPlateUrl"/>
      </el-form-item>
      <el-form-item label="法人身份证正面">
        <imageUpload :limit="1" :fileSize="10" v-model="form.legalIdcardUrl" :toImageUrl="form.legalIdcardUrl"/>
      </el-form-item>
      <el-form-item label="法人身份证反面">
        <imageUpload :limit="1" :fileSize="10" v-model="form.legalIdcardUrl2" :toImageUrl="form.legalIdcardUrl2"/>
      </el-form-item>
      <el-form-item label="其他材料">
        <fileUpload :limit="3" :fileSize="10" :fileType="['doc', 'docx', 'xls', 'xlsx', 'pdf']" v-model="form.otherInfo" :toImageUrl="form.otherInfo"/>
      </el-form-item>
    <el-form-item label="备注" prop="desc">
      <el-input type="textarea" placeholder="备注" v-model="form.desc"></el-input>
    </el-form-item>
    <el-form-item label="手机账号" prop="phonenumber">
      <el-input style="width:200px" v-model="form.phone" placeholder="手机账号"></el-input>
    </el-form-item>
    <el-form-item label="账号状态" prop="status">
      <el-select style="width:200px" v-model="form.status" placeholder="账号状态">
        <el-option label="启用" value="0"></el-option>
        <el-option label="停用" value="1"></el-option>
      </el-select>
    </el-form-item>
    <div>
      <el-form-item class="inline-block" label="应用系统" prop="applicationSystem">
        <el-input disabled style="width:200px" v-model="form.applicationSystem" placeholder="应用系统"></el-input>
      </el-form-item>
      <el-form-item class="inline-block ml10" label="" prop="level" label-width="0">
        <el-select style="width:100px" v-model="form.level" placeholder="账户等级">
          <el-option label="完整版" value="1"></el-option>
        </el-select>
      </el-form-item>
    </div>
    <div>
      <el-form-item class="inline-block" label="应用系统">
        <el-input disabled style="width:200px" value="物流运营管理系统移动端" placeholder="应用系统"></el-input>
      </el-form-item>
      <el-form-item class="inline-block ml10" label="" prop="user_roleIds" label-width="0">
        <el-select disabled style="width:100px" v-model="form.level" multiple placeholder="账户等级">
          <el-option label="完整版" value="1"></el-option>
        </el-select>
      </el-form-item>
    </div>
<!--    <el-form-item label="生效时长" prop="sessionTimeout">-->
<!--      <el-select style="width:200px" v-model="form.sessionTimeout" placeholder="生效时长">-->
<!--          <el-option-->
<!--            v-for="(item, index) in dictObject.effective_duration"-->
<!--            :key="index"-->
<!--            :label="item.dictLabel"-->
<!--            :value="item.dictValue"-->
<!--          ></el-option>-->
<!--      </el-select>-->
<!--    </el-form-item>-->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible_map"
      width="800px"
      append-to-body
      @close="dialogVisible_map = false">
      <GaoDeMap ref="GaoDeMap" v-if="dialogVisible_map === true"></GaoDeMap>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible_map = false">取 消</el-button>
        <el-button type="primary" @click="confirmSelect">确 定</el-button>
      </span>
    </el-dialog>
  </el-form>
</template>

<script>
import { validEmail } from "@/utils/validate"
import UploadImage from '@/components/UploadImage/uploadImage.vue';
import UploadImageMul from '@/components/UploadImage/uploadImageMul.vue';
import UploadFile from '@/components/UploadFile';
import { getAllInfo,getAllInfoTree  } from "@/api/login";
export default {
  name: "basicAdd",
  components: {
    UploadImage,
    UploadImageMul,
    UploadFile
  },
  data() {
    return {
      form: {
        applicationSystem: '物流运营管理PC端',
        level:'1'
      },
      rules: {
        applicationSystem: [
          { required: true, message: "应用系统不能为空", trigger: "blur" },
        ],
        deptName: [
          { required: true, message: "组织名称不能为空", trigger: "blur" },
        ],
        deptMode: [
          { required: true, message: "组织模式不能为空", trigger: "change" },
        ],
        // level: [
        //   { required: true, message: "账户等级不能为空", trigger: "change" },
        // ],
        deptNature: [
          { required: true, message: "客户性质不能为空", trigger: "change" },
        ],
        status: [
          { required: true, message: "账号状态不能为空", trigger: "change" },
        ],
        sessionTimeout: [
          { required: true, message: "生效时长不能为空", trigger: "change" },
        ],
        deptBizScope: [
          { required: true, message: "业务范围不能为空", trigger: "blur" },
        ],
        deptDistrict: [{ required: true, message: "经营地址不能为空", trigger: 'change' }],
        deptAddress: [{ required: true, message: "详细地址不能为空", trigger: 'change' }],
        leader: [{ required: true, message: "联系人不能为空", trigger: 'blur' }],
        email: [
          {
            validator:  (rule, value, callback) => {
              if (!value) {
                callback();
              } else if (!validEmail(value)) {
                callback(new Error('电子邮箱格式错误'));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ],
        phonenumber: [
          { required: true, trigger: "blur", message: "手机账号不能为空" },
          {
            pattern: /^1[3-9]\d{9}$/, message: '手机账号格式错误', trigger: 'blur'
          }
        ],
        phone: [
          { required: true, trigger: "blur", message: "联系电话不能为空" },
          {
            pattern: /^1[3-9]\d{9}$/, message: '联系电话格式错误', trigger: 'blur'
          }
        ],
      },
      allInfoOptions: [],
      dialogVisible_map: false,
      District:[],
    };
  },
  created() {
      // getAllInfo().then(res => {
      //   this.allInfoOptions = res.data
      // });
     getAllInfoTree().then(res => {
      this.allInfoOptions = res.data
      const deleteChildren = function(data) {
        for (let i in data) {
          if (data[i].children.length) {
            deleteChildren(data[i].children);
          }
          else delete data[i].children
        }
      }
      deleteChildren(this.allInfoOptions)
    });
  },
  methods: {
    handleValidate() {
      return new Promise((resolve) => {
        this.$refs.form.validate(valid => {
          if (valid) {
            resolve(true)
          } else {
            resolve(false)
          }
        });
      })
    },
    limitInput(value,name) {
      this.form[name] = ('' + value) // 第一步：转成字符串
            .replace(/[^\d]/g, "") // 只能输入数字
            .replace(/^0+(\d)/, "$1"); // 第一位0开头，0后面为数字，则过滤掉，取后面的数字
    },
    confirmSelect() {
      const form = this.$refs.GaoDeMap.form
      if (!form.address) {
        this.$message.error('请选择详细地址')
        return
      }
      this.$set(this.form,"deptDistrict",String(form.adcode))
      this.$set(this.form,"deptAddress",form.addressShort)
      this.form.deptLng = form.lng
      this.form.deptLat = form.lat
      this.dialogVisible_map = false
    },
    mergeDisplay(val) {
      return `${val.provinceName}${val.addressName}`
    },
    changeAddress(){
      this.$set(this.form,"deptProv",this.District[0])
      this.$set(this.form,"deptCity",this.District[1])
      this.$set(this.form,"deptDistrict",this.District[2])
    },
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
</style>
